<script setup>
import { onMounted } from "vue";
import NavBar from "@/components/NavBar/index.vue";
import TabBar from "@/components/TabBar/index.vue";
import CarDetailCard from "@/components/CarDetailCard/index.vue";
import RentWayCard from "@/components/RentWayCard/index.vue";
import { rentCarDetail, rentWays } from '@/constants/mock.js';
import DragableCustomerButton from "@/components/DragableCustomerButton/index.vue";

function navigateToHome() {
  uni.navigateBack();
}
</script>

<template>
  <div class="container">
    <NavBar></NavBar>
    <div @click="navigateToHome" class="back-nav">
      <image
        src="@/static/icon/chevron-left.png"
        style="width: 14px; height: 14px"
      ></image>
      <text>车辆详情</text>
    </div>
		<CarDetailCard :carInfo="rentCarDetail"></CarDetailCard>
		<div class="select-container">
			<div class="rent-way selected">租车方案</div>
			<div class="multi-rent">批量租车</div>
		</div>
		<scroll-view scroll-y="true" class="scroll-Y">
			<div class="rent-way-list">
			  <div v-for="way in rentWays" :key="way.number">
			    <RentWayCard :wayInfo="way"></RentWayCard>
			  </div>
			</div>
		</scroll-view>
		<DragableCustomerButton></DragableCustomerButton>
  </div>
</template>

<style scoped>
.scroll-Y {
	height: calc(100vh - 125px - 258px);
}
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: linear-gradient(180deg, #c3e4b3 0%, #f5fff0 100%);
}

.back-nav {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: flex-start;
  margin: 20px 0;
  align-items: center;
  column-gap: 8px;
  font-size: 16px;
}
.select-container {
	margin-left: 22px;
	margin-bottom: 23px;
	display: flex;
}
.rent-way {
	margin-right: 38px;
}
.selected {
	border-bottom: 2px solid #000;
}

</style>
